<template>
  <tree-table
    :rows="departments"
    row-key="code"
    children-key="subs"
    :columns="columns"
    selection="multiple"
    indent-size="30"
    v-model:selected="selected"
    v-model:expanded-keys="expandedKeys"
  >
    <!-- <template #body-cell-budget="props">
      <q-td :props="props"> ¥ {{ props.row.budget.toLocaleString() }} </q-td>
    </template> -->

    <template #body-cell-actions="props">
      <q-btn-group flat>
        <q-btn flat round dense color="primary" icon="edit" @click="handleEdit(props.row)" />
        <q-btn flat round dense color="negative" icon="delete" @click="handleDelete(props.row)" />
      </q-btn-group>
    </template>
  </tree-table>
</template>

<script setup>
import { ref } from 'vue'
import treeTable from '@/components/common/FyTreeTable/FyTreeTable.vue'
const columns = [
  { name: 'code', label: '部门编码', field: 'code', align: 'left' },
  { name: 'name', label: '部门名称', field: 'name' },
  { name: 'type', label: '部门类型', field: 'type' },
  { name: 'budget', label: '预算', field: 'budget', format: (val) => `¥ ${val.toLocaleString()}` },
  { name: 'actions', label: '操作', field: '', align: 'center' },
]

const departments = ref([
  {
    code: 'D001',
    name: '总部',
    type: '管理',
    budget: 5000000,
    subs: [
      {
        code: 'D002',
        name: '研发中心',
        type: '技术',
        budget: 3000000,
        subs: [
          {
            code: 'D003',
            name: '前端组',
            type: '开发',
            budget: 1000000,
            subs: [
              {
                code: 'D005',
                name: 'UI小组',
                type: '设计',
                budget: 500000,
              },
            ],
          },
          { code: 'D004', name: '后端组', type: '开发', budget: 1500000 },
        ],
      },
      {
        code: 'M001',
        name: '市场部',
        type: '市场',
        budget: 2000000,
      },
    ],
  },
])

// 操作处理函数

const selected = ref([])
const expandedKeys = ref(['D001'])
</script>
